<template>
  <div>
    <h3 class="title">任务调度</h3>
    <el-form
      ref="form"
      :model="data.monitorConf"
      :rules="rules"
      label-width="100px"
      style="box-shadow: 0 0 2px #aaa"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务名称" prop="jobName">
            <el-input
              v-model="data.monitorConf.jobName"
              disabled
              placeholder="请输入任务名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务分组" prop="jobGroup">
            <el-select
              v-model="data.monitorConf.jobGroup"
              disabled
              placeholder="请选择任务分组"
            >
              <el-option
                v-for="dict in dict.type.sys_job_group"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="cron表达式" prop="cronExpression">
            <el-input
              v-model="data.monitorConf.cronExpression"
              placeholder="请输入cron执行表达式"
            >
              <template slot="append">
                <el-button type="primary" @click="handleShowCron">
                  生成表达式
                  <i class="el-icon-time el-icon--right" />
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-radio-group v-model="data.monitorConf.status">
              <el-radio
                v-for="dict in dict.type.sys_job_status"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="执行策略" prop="misfirePolicy">
            <el-radio-group
              v-model="data.monitorConf.misfirePolicy"
              size="small"
            >
              <el-radio-button label="1">立即执行</el-radio-button>
              <el-radio-button label="2">执行一次</el-radio-button>
              <el-radio-button label="3">放弃执行</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否并发" prop="concurrent">
            <el-radio-group v-model="data.monitorConf.concurrent" size="small">
              <el-radio-button label="0">允许</el-radio-button>
              <el-radio-button label="1">禁止</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      title="Cron表达式生成器"
      :visible.sync="openCron"
      append-to-body
      destroy-on-close
      class="scrollbar"
    >
      <crontab
        :expression="expression"
        @hide="openCron = false"
        @fill="crontabFill"
      />
    </el-dialog>
  </div>
</template>

<script>
import Crontab from '@/components/Crontab'
import { listJob } from '@/api/monitor/job'
import Vue from 'vue'

export default {
  name: 'MonitorConf',
  dicts: ['sys_job_status', 'sys_job_group'],
  components: { Crontab },
  props: ['data', 'jobId', 'dicts'],
  data() {
    return {
      openCron: false,
      rules: {
        jobId: [
          { required: true, message: '请选择任务调度模板', trigger: 'change' }
        ]
      },
      expression: ''
    }
  },
  created() {
    if (this.$props.data.monitorConf) {
      this.$props.data.monitorConf =
        typeof this.$props.data.monitorConf === 'string'
          ? JSON.parse(this.$props.data.monitorConf)
          : this.$props.data.monitorConf
    } else {
      Vue.set(this.$props.data, 'monitorConf', {})
    }
    // console.log()
  },
  mounted() {
    this.handelcdcSwitchChange()
  },
  methods: {
    /** 确定后回传值 */
    crontabFill(value) {
      this.$props.data.monitorConf.cronExpression = value
    },
    handleShowCron() {
      this.expression = this.$props.data.cronExpression
      this.openCron = true
    },
    handelcdcSwitchChange() {
      const { taskName, jobType } = this.$props.data
      let obj = {}
      listJob({
        pgNum: 1,
        pgSize: 999,
        jobId: this.$props.jobId
      }).then((res) => {
        obj = res.rows[0]
        this.getDicts(this.$props.dicts).then((res) => {
          const type = Array.isArray(jobType) ? jobType[1] : jobType
          const item = res.data.find((f) => f.dictValue === type)
          obj.jobName = taskName + item.dictLabel
          Vue.set(this.$props.data, 'monitorConf', obj)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  color: #333;
  font-size: 18px;
  line-height: 1.25;
  box-sizing: border-box;
  font-weight: 600;
  margin: 25px 0;
  text-align: left;
}
</style>
